<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>轮播图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }
      .box {
        width: 500px;
        height: 180px;
        overflow: hidden;
        position: relative;
      }
      ul {
        list-style: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -60px;
      }
      ul li {
        float: left;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
      }
      ul li.active {
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="box box1">
      <img src="./imgs/img1.jpg" alt="" />
      <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="box box2">
      <img src="./imgs/img1.jpg" alt="" />
      <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </body>
  <script>
    //匿名函数自调用
    (function() {
      //1. 定时器切换图片
      //1.1 间隔定时器每隔3s给全局变量num++
      let num = 1;
      let t;
      function startLbt() {
        t = setInterval(() => {
          num++;
          //1.2 判断num>6重置num为1
          if (num > 6) {
            num = 1;
          }
          //1.3 将num作为图片名
          document.querySelector(".box1 img").src = `./imgs/img${num}.jpg`;
          //1.4 同步分页器变化
          //1.4.1 获取所有分页器
          let ulLiObjs = document.querySelectorAll(".box1 ul li");
          //1.4.2 清空所有分页器效果
          ulLiObjs.forEach(item => {
            item.className = "";
          });
          //1.4.3 给当前分页器加效果 通过图片名
          ulLiObjs[num - 1].className = "active";
        }, 1000);
      }
      startLbt();
      //2. 获取所有分页器
      let ulLiObjs = document.querySelectorAll(".box1 ul li");
      //3. 遍历
      ulLiObjs.forEach((item, i) => {
        //4. 每个都绑定鼠标移入事件 -> 停止计时器
        item.onmouseover = function() {
          //4.1 停止计时器
          clearInterval(t);
          //4.2 图片切换当前
          document.querySelector(".box1 img").src = `./imgs/img${i +
            1}.jpg`;
          //4.3 全局num也改成当前
          num = i + 1;
          //4.4 同步分页器颜色
          ulLiObjs.forEach(item => {
            item.className = "";
          });
          ulLiObjs[i].className = "active";
        };
        //5. 每个都绑定鼠标移出事件 -> 重启定时器
        item.onmouseout = function() {
          startLbt();
        };
      });
    })();
    (function() {
      // 一、定时器切换图片
      // 1.1 间隔定时器每隔3s给全局变量num++
      let num = 1;
      let t;
      function startLbt() {
        t = setInterval(() => {
          num++;
          // 1.2 判断num>6重置num为1
          if (num > 6) num = 1;
          // 1.3 将num作为图片名
          // document.querySelector('img').src = './imgs/img2.jpg'
          document.querySelector(".box2 img").src = `./imgs/img${num}.jpg`;
          // 1.4 同步分页器变化
          // 1.4.1 获取所有分页器
          let ulLiObjs = document.querySelectorAll(".box2 ul li");
          // 1.4.2 清空所有分页器效果
          ulLiObjs.forEach(item => {
            item.className = "";
          });
          // 1.4.3 给当前的分页器加效果 通过图片名
          ulLiObjs[num - 1].className = "active";
        }, 1000);
      }
      startLbt();

      // 二、获取所有分页器
      let ulLiObjs = document.querySelectorAll(".box2 ul li");
      // 三、遍历
      ulLiObjs.forEach((item, i) => {
        // item就是一个个li标签对象
        // 四、挨个绑定鼠标移入事件 -> 停止定时器
        item.onmouseover = function() {
          // 1 停止定时器
          clearInterval(t);
          // 2 图片切换当前的
          document.querySelector(".box2 img").src = `./imgs/img${i +
            1}.jpg`;
          // 3 全局num也改成当前的
          num = i + 1;
          // 4 同步分页器颜色
          ulLiObjs.forEach(item => {
            item.className = "";
          });
          ulLiObjs[i].className = "active";
        };
        // 五、挨个绑定鼠标移出事件 -> 重启定时器
        item.onmouseout = function() {
          startLbt();
        };
      });
    })();
  </script>
</html>
